<template>
  <div class="view-container">


        <!-- 发送 -->
        <el-container class="fasong">
          <el-header>
            <el-row class="elA">
              <el-col :span="2">标题：</el-col>
              <el-col :span="22">
                <el-input v-model="user.infoTitle"></el-input>
              </el-col>
            </el-row>
            <el-row class="elA">



              <el-col :span="2">分类：</el-col>
              <el-col :span="22">
                <el-select v-model="user.infoType" placeholder="选择分类">
                  <el-option
                    v-for="itema in fenlei"
                    :key="itema.value"
                    :label="itema.label"
                    :value="itema.value"
                  ></el-option>
                </el-select>




              </el-col>
            </el-row>

          </el-header>
          <el-main>
            <Tinymce v-model="user.infoContent" />
          </el-main>
          <el-footer>
            <span>

            </span>
            <el-button type="primary" @click="tanChu">发送</el-button>
          </el-footer>
        </el-container>




  </div>
</template>
<script>

  import Tinymce from "@/components/Tinymce";
  import wenhuaxuanchuan from "@/api/menhu/wenhuaxuanchuan";

  export default {
    components: {
      Tinymce,

    },

    name: "",
    data() {
      return {
        fenlei: [], //分类
        //发送  数据对象
        user: {
          infoContent: "",//内容
          infoTitle:"",//标题
          infoType:""//分类
    },



      };
    },
    //生命周期
    created() {
    this.alltype()
    },
    methods: {
      //


      //发送消息
      tanChu() {
        wenhuaxuanchuan.addWenxuan(this.user).then(res => {
          console.log(this.user);
          this.$message.success("添加成功");
        });

      },

      alltype(){
        wenhuaxuanchuan.infoTypes().then(res=>{
          console.log(res.records)
          this.fenlei = res.records
        })
      }

    }
  };
</script>

<style scoped lang="scss">

  .block{
    margin-top: 10px;
    margin-left: -40px;
  }
  //弹出框头部
  .toubu {
    background-color: chocolate;
  }
  .shux {
    display: inline-block;
    border: 1px solid #000;
    width: 49%;
    height: 350px;
  }

  .shuxB {
    display: inline-block;
    border: 1px solid #000;
    width: 49%;
    height: 350px;
    margin-left: 10px;
  }
  .maints {
    display: flex;
  }

  // 发送消息头部
  .fasong {
    border: 1px solid rgb(201, 201, 201);
    margin: 5px;
  }
  .fasong .el-header {
    margin-bottom: 70px;
    height: 100px;
  }
  .el-icon-close {
    color: red;
    font-size: 20px;
  }
  .elA .el-col:nth-child(1) {
    text-align: right;
    font-size: 12px;
    margin-top: 5px;
  }
  .elA {
    margin-top: 20px;
  }

  .elA .el-select {
    width: 500px;
  }
  .elA:nth-child(2) .el-col:nth-child(1) {
    margin-top: 10px;
  }
  .soso {
    border: 1px solid rgb(216, 216, 216);
    display: inline-block;
    width: 200px;
    height: 20px;
    border-radius: 5px;
  }
  // 发送消息底部
  .view-container>.el-tabs{
    height: 100%;
  }
  .view-container {
    border-radius: 5px;
    box-shadow: inset 0 0 0px 1px #fff;

    border: 1px solid rgba(143, 143, 143, 0.479);

    padding: 0;
    margin: 10px;
    height: 100%;
  }

  .group {
    background-color: rgba(122, 121, 121, 0.164);

    width: 100%;
    padding: 0;
    margin: 0;
  }
</style>
